<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <appointment-edit ref="appointmentEdit" v-on:save-finished="searchAppointment"></appointment-edit>
      <el-row style="padding-bottom: 8px;">
        <el-col :span="12">
          <el-input placeholder="预约人姓名" size="small" style="width:260px" v-model="search.name">
            <el-button slot="append" icon="el-icon-search" @click="searchAppintment()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleCreateAppointment"
          >添加</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="appointmentList" border size="mini" header-cell-class-name="header-row">
            <el-table-column
              prop="name"
              label="姓名"
              header-align="center"
              align="center"
              width="150px"
            ></el-table-column>
            <el-table-column
              label="姓别"
              header-align="center"
              :formatter="formatterSex"
              align="center"
              width="120px"
            ></el-table-column>
            <el-table-column
              prop="idcard"
              label="身份证号"
              header-align="center"
              align="center"
              width="250px"
            ></el-table-column>
            <el-table-column
              prop="phone"
              label="手机号码"
              header-align="center"
              align="center"
              width="200px"
            ></el-table-column>
            <el-table-column
              prop="tOrder.orderdate"
              label="预约日期"
              align="center"
              header-align="center"
              sortable
              width="170px"
            ></el-table-column>
            <el-table-column
              label="预约状态"
              prop="tOrder.orderstatus"
              header-align="center"
              :formatter="formatterState"
              align="center"
              width="130px"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="changeStatus2(scope.row.tOrder.id)"
                  v-if="scope.row.tOrder.orderstatus==0"
                >取消</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="appointmentTotal"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import AppointmentEdit from "@/components/dingming/appointment/appointmentEdit";
import {
  listAppointment,
  listMember,
  changeStatus
} from "@/api/dingming/appointment";
import { listCombo } from "@/api/dingming/combo";

export default {
  components: { AppointmentEdit },
  data() {
    return {
      appointmentList: [],
      appointmentTotal: 0,
      loading: true,
      search: {
        name: "",
        orderStatus: "",
        offset: 0,
        limit: 5,
        currentPage: 1
      }
    };
  },
  methods: {
    /*过滤预约状态 */
    filterState() {},

    /*查询*/
    searchAppointment() {
      this.loading = true;
      listAppointment(this.search)
        .then(response => {
          this.appointmentList = response.data.rows;
          this.appointmentTotal = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /*分页*/
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = (this.search.currentPage - 1) * val;
      this.searchAppintment();
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit;
      this.search.currentPage = val;
      this.searchAppintment();
    },

    /*显示性别处理*/
    formatterSex(row, column) {
      if (parseInt(row.idcard.substr(16, 1)) % 2 != 0) {
        return "男";
      }
      return "女";
    },

    /*显示预约状态处理*/
    formatterState(row, column) {
      if (row.tOrder.orderstatus === 1) {
        return "已取消";
      }else if (row.tOrder.orderstatus === 0) {
        return "已预约";
      } else{
        return "已体检";
      }
    },

    /*点击添加按钮*/
    async handleCreateAppointment() {
      this.loading = true;
      try {
        let [responseData, comboData] = await Promise.all([
          listMember(),
          listCombo({
            name: null,
            orderStatus: null,
            offset: null,
            limit: null
          })
        ]);
        this.$refs.appointmentEdit.$emit(
          "openAddAppointmentDialog",
          responseData.data,
          comboData.data.rows
        );
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    },
    /**
     * 点击取消按钮
     */
    changeStatus2(orderId) {
      this.loading = true;
      changeStatus(orderId, 1)
        .then(response => {
          this.loading = false;
          this.searchAppointment();
        })
        .catch(error => {
          this.outputError(error);
        });
    },

    /*错误提示*/
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    },

    /*初始化数据*/
    async pageInit() {
      this.loading = true;
      try {
        let [responseData] = await Promise.all([listAppointment(this.search)]);
        this.appointmentList = responseData.data.rows;
        this.appointmentTotal = responseData.data.total;
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    }
  },
  created() {
    this.pageInit();
  }
};
</script>

<style>
</style>